<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.zhuan{
					animation: circling 20s linear infinite;
					width: 20rem;
					height: 20rem;
					background-color: red;
					border-radius: 50%;
					text-align: center;
					line-height: 20rem;
					/* animation-play-state:running; */
				}
				@keyframes circling{
					0%{transform: rotate(0deg);}
					100%{transform: rotate(360deg);}
				}
		</style>
	</head>
	<body>
		<div class="zhuan" >
			yfgfghfhgfhg
		</div>
		
		<script>
			var isPlay = true;
			var zhuan = document.getElementsByClassName("zhuan")[0];
			zhuan.onclick=function(){
				if(isPlay) {
					zhuan.style.animationPlayState = "running";
					isPlay = false;
				} else {
					zhuan.style.animationPlayState = "paused";
					isPlay = true;
				}
			}
			
		</script>
	</body>
</html>
